<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>PRIMI PASSI CON BRACKETS!</title>
        <meta name="description" content="Una guida interattiva per muovere i primi passi su Brackets.">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>

        <h1>PRIMI PASSI CON BRACKETS!</h1>
        <h2>Questa è la tua guida!</h2>
        
        <!--
            FATTO CON <3 E JAVASCRIPT
        -->
        
        <p>
            Benvenuto in questa versione preliminare di Brackets, un nuovo editor open-source per la nuova
            generazione del web. Noi siamo grandi fan degli standard e vogliamo realizzare degli strumenti
            migliori per lavorare in JavaScript, HTML, CSS e altre tecnologie aperte del web. Questo è il
            nostro umile inizio.
        </p>
        
        <!--
            COS'È BRACKETS?
        -->
        <p>
            <em>Brackets è un editor differente.</em>
            Un importante differenza è che questo editor è scritto in JavaScript, HTML e CSS.
            Questo significa che la maggior parte di coloro che utilizzano Brackets, sono in grado di modificare
            e ampliare l'editor. Infatti, noi usiamo Brackets ogni giorno per costruire Brackets.
            Brackets è inoltre dotato di caratteristiche uniche come Modifica Rapida, Anteprima Live e altre
            caratteristiche che non trovereste altrove.
        </p>
        
        
        <h2>Stiamo provando alcune cose nuove</h2>
        
        <!--
            LA RELAZIONE TRA HTML, CSS E JAVASCRIPT
        -->
        <h3>Modifica rapida per CSS e JavaScript</h3>
        <p>
            Non c'è più bisogno di spostarsi continuamente da un documento all'altro. Quando si lavora al codice
            HTML, è possibile digitare <kbd>Cmd/Ctrl + E</kbd> per aprire un'area di modifica rapida che mostra
            il CSS corrispondente. Una volta effettuata una modifica al codice CSS, basta premere <kdb>ESC</kdb>
            e si ritorna sull'HTML chiudendo l'area di modifica rapida, o è possibile lasciare aperta tale area
            continuando a lavorare sull'HTML. Premendo invece <kbd>ESC</kbd> al di fuori di tale area, tutte le
            aree di modifica rapida verranno chiuse.
        </p>
        
        <samp>
            Vuoi vederlo in azione? Posiziona il cursore nel tag <!-- <samp> --> sopra e premi
            <kbd>Cmd/Ctrl + E</kbd>. Dovresti vedere un'area di modifica rapida del CSS apparire sopra.
            Sulla destra vedrai la lista delle regole CSS corrispondenti a questo tag. Scorri
            semplicemente le regole con <kbd>Alt + Up/Down</kbd> per trovare quella che intendi modificare.
        </samp>
        
        <a href="screenshots/quick-edit.png">
            <img alt="Uno screenshot che mostra una finestra di modifica rapida CSS" src="screenshots/quick-edit.png" />
        </a>
        
        <p>
            Puoi usare la stessa combinazione di tasti per il codice JavaScript e vedere il corpo di una funzione
            posizionando il cursore nel nome della funzione chiamata. Per il momento gli editor in linea non possono
            essere nidificati, quindi è possibile usare la modifica rapida solo quando il cursore è posizionato nell'editor
            generale.
        </p>
        
        <!--
            ANTEPRIMA LIVE
        -->
        <h3>L'anteprima del CSS cambia in tempo reale nel browser</h3>
        <p>
            Conosci la solita procedura "salva/ricarica" che abbiamo fatto per anni? Fai una modifica tramite editor,
            premi "salva", passi alla finestra del browser e aggiorni la pagina per vedere il risultato?
            Con Brackets non avrai più bisogno di questo procedimento.
        </p>
        <p>
            Brackets aprirà una <em>connessione in tempo reale</em> con il tuo browser e gli manderà tutte le modifiche
            del CSS non appena tu le avrai digitate! Forse oggi stai già facendo qualcosa di simile con qualche
            strumento browser-based, ma con Brackets non avrai bisogno di copiare e incollare il codice CSS definitivo
            nel tuo editor. Il tuo codice gira nel browser, ma risiede già nell'editor!
        </p>
        
        <h3>L'anteprima mette in risalto gli elementi HTML e le regole CSS.</h3>
        <p>
            Brackets rende semplice vedere come le proprie modifiche all'HTML e al CSS hanno effetto sulla pagina.
            Quando il cursore è su una regola CSS, nel browser verranno messi in risalto tutti gli elementi che
            vengono influenzati da quella regola. Similmente, quando stai modificando un file HTML, Brackets metterà
            in risalto nel browser gli elementi HTML corrispondenti.
        </p>
        
        <samp>
            Se hai Google Chrome installato, puoi provare da te. Clicca nell'icona con il fulmine nell'angolo
            in alto a destra della finestra di Brackets oppure premi <kbd>Cmd/Ctrl + Alt + P</kbd>. Quando
            Anteprima Live è abilitata in un documento HTML, tutti i documenti CSS collegati possono essere
            modificati in tempo reale. L'icona cambierà colore, dal grigio al dorato, quando Brackets stabilisce
            una connessione con il tuo browser.
            
            Adesso, posiziona il cursore sul tag <!-- <img> --> sopra. Noterai un highlight blu apparire attorno
            all'imagine su Chrome. Successivamente, usa <kdb>Cmd/Ctrl + E</kdb> per aprire le regole CSS.
            Prova a cambiare la grandezza del bordo da 10px a 20px o cambia il colore di sfondo da "transparent" a
            "hotpink". Se Brackets e il tuo browser sono posizionati fianco a fianco, noterai istantaneamente
            i cambiamenti anche nel tuo browser. Bello, vero?
        </samp>
                
        <p class="note">
            Oggi, Brackets supporta solo l'Anteprima Live per il CSS. Comunque, nella versione corrente, i
            cambiamenti ai file HTML e JavaScript sono automaticamente ricaricati quando si salva. Al momento
            stiamo lavorando al supporto di HTML e JavaScript nell'Anteprima Live. Inoltre le anteprime live sono
            supportate solo su Google Chrome, ma per il futuro speriamo di portare questa funzionalità anche
            sugli altri browser più comuni.
        </p>
                
        <h3>Visualizzazione Rapida</h3>
        <p>
            Per coloro che non hanno ancora memorizzato i colori associati ai valori HEX o RGB, Brackets rende
            facile e veloce vedere esattamente qual è il colore corrispondente. Nei documenti CSS e HTML basta
            semplicemente posizionare il mouse sopra il valore di ogni colore e Brackets mostrerà automaticamente
            un'anteprima di quel colore. La stessa cosa vale per le immagini: basta spostare il mouse sopra il
            link dell'immagine all'interno dell'editor Brackets ed esso mostrerà una miniatura di quell'immagine.
        </p>
        
        <samp>
            Prova la Visualizzazione Rapida, posiziona il cursore sopra il tag <!-- <body> --> nella parte
            superiore di questo documento e premi <kbd>Cmd/Ctrl + E</kbd> per una modifica rapida del CSS.
            Adesso posiziona il mouse sopra un valore di qualche colore. Inoltre puoi vederla in azione sui
            gradienti aprendo una modifica veloce CSS sopra il tag <!-- <html> --> e posizionando il mouse
            sopra qualche valore corrispondente all'immagine di sfondo. Prova l'anteprima dell'immagine,
            posiziona il cursore sopra lo screenshot presente all'inizio di questo documento.
        </samp>
        
        <!--
            DICCI COSA NE PENSI
        -->
        <h2>Partecipa</h2>
        <p>
            Brackets è un progetto open source. Sviluppatori web da ogni parte del mondo stanno contribuendo
            per realizzare un editor migliore. Altri ancora stanno realizzando estensioni che espandono le
            funzionalità di Brackets. Dicci cosa ne pensi, condividi le tue idee o contribuisci direttamente
            al progetto.
        </p>
        <ul>
            <li><a href="http://brackets.io">Brackets.io</a></li>
            <li><a href="http://blog.brackets.io">Brackets Team Blog</a></li>
            <li><a href="http://github.com/adobe/brackets">Brackets su GitHub</a></li>
            <li><a href="https://github.com/adobe/brackets/wiki/Brackets-Extensions">Brackets Extensions</a></li>
            <li><a href="http://github.com/adobe/brackets/wiki">Brackets Wiki</a></li>
            <li><a href="http://groups.google.com/group/brackets-dev">Brackets Developer Mailing List</a></li>
            <li><a href="https://twitter.com/#!/brackets">@Brackets su Twitter</a></li>
            <li>Chatta con gli sviluppatori di Brackets nel canale IRC #brackets su Freenode</li>
        </ul>

    </body>
</html>
<!--

    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[     CODE THE WEB     ]:::::]
    [:::::[  http://brackets.io  ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]

-->